﻿@using DAL;
@using DataProj.Areas.BackSys.ServiceTools;
@model List<DAL.UserInfo>
@{
    ViewBag.Title = "用户注册";
    Layout = "../Shared/_LayoutBase.cshtml";
    string loginType = MySession.GetSession("loginType");
    string userName = MySession.GetSession("userName");

}
@section CssLink{


}
<div id="app">
    <div class="page-heading">
        <h3>
            用户管理
        </h3>
        <ul class="breadcrumb">
            <li>
                <a href="">物流管理系统</a>
            </li>
            <li>
                <a href="">用户管理</a>
            </li>
            <li class="active"> 用户注册 </li>
        </ul>
    </div>
    <!-- page start-->
    <div class="row">
        <div class="col-lg-6">
            <section class="panel">
                <header class="panel-heading">
                    信息填写
                </header>
                <div class="panel-body">
                    <form class="form-horizontal adminex-form" method="get">
                        <div class="form-group">
                            <label class="col-sm-2 col-sm-2 control-label">账户昵称</label>
                            <div v-if="UserName" class="col-sm-10 has-success">
                                <input v-model="UserName" type="text" class="form-control ">
                                <span class="help-block">输入正确</span>
                            </div>
                            <div v-else class="col-sm-10 has-error">
                                <input v-model="UserName" type="text" class="form-control ">
                                <span class="help-block">输入不得为空</span>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 col-sm-2 control-label">账户密码</label>
                            <div v-if="UserPass" class="col-sm-10 has-success">
                                <input v-model="UserPass" type="password" class="form-control ">
                                <span class="help-block">输入正确</span>
                            </div>
                            <div v-else class="col-sm-10 has-error">
                                <input v-model="UserPass" type="password" class="form-control ">
                                <span class="help-block">输入不得为空</span>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 col-sm-2 control-label">密码确认</label>
                            <div v-if="ValUserPass&&ValUserPass==UserPass" class="col-sm-10 has-success">
                                <input v-model="ValUserPass" type="password" class="form-control ">
                                <span class="help-block">输入正确</span>
                            </div>
                            <div v-else class="col-sm-10 has-error">
                                <input v-model="ValUserPass" type="password" class="form-control ">
                                <span class="help-block">两次密码输入不一致</span>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 col-sm-2 control-label">联系地址</label>
                            <div v-if="Address" class="col-sm-10 has-success">
                                <input v-model="Address" type="text" class="form-control ">
                                <span class="help-block">输入正确</span>
                            </div>
                            <div v-else class="col-sm-10 has-error">
                                <input v-model="Address" type="text" class="form-control ">
                                <span class="help-block">输入不得为空</span>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 col-sm-2 control-label">邮箱</label>
                            <div v-if="Email" class="col-sm-10 has-success">
                                <input v-model="Email" type="text" class="form-control ">
                                <span class="help-block">输入正确</span>
                            </div>
                            <div v-else class="col-sm-10 has-error">
                                <input v-model="Email" type="text" class="form-control ">
                                <span class="help-block">输入不得为空</span>
                            </div>
                        </div>


                        <div class="form-group">
                            <label class="col-sm-2 col-sm-2 control-label">手机号</label>
                            <div v-if="Phone" class="col-sm-10 has-success">
                                <input v-model="Phone" type="text" class="form-control ">
                                <span class="help-block">输入正确</span>
                            </div>
                            <div v-else class="col-sm-10 has-error">
                                <input v-model="Phone" type="text" class="form-control ">
                                <span class="help-block">输入不得为空</span>
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="col-sm-2 col-sm-2 control-label">真实姓名</label>
                            <div v-if="TrueName" class="col-sm-10 has-success">
                                <input v-model="TrueName" type="text" class="form-control ">
                                <span class="help-block">输入正确</span>
                            </div>
                            <div v-else class="col-sm-10 has-error">
                                <input v-model="TrueName" type="text" class="form-control ">
                                <span class="help-block">输入不得为空</span>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 col-sm-2 control-label">身份证号</label>
                            <div v-if="IDCard" class="col-sm-10 has-success">
                                <input v-model="IDCard" type="text" class="form-control ">
                                <span class="help-block">输入正确</span>
                            </div>
                            <div v-else class="col-sm-10 has-error">
                                <input v-model="IDCard" type="text" class="form-control ">
                                <span class="help-block">输入不得为空</span>
                            </div>
                        </div>
                        <div class="form-group center">
                            <div class="col-lg-6">
                            </div>
                            <button type="reset" class="center btn btn-info">重置</button>

                            <button type="button" class="center btn btn-primary"  data-toggle="modal" data-target="#addModal">提交</button>
                        </div>

                    </form>
                </div>
            </section>
            <!-- 模态框示例（Modal） -->
            <form method="post" class="form-horizontal" role="form" id="form_data"  style="margin: 20px;">
                <div class="modal fade" id="addModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                    <div class="modal-dialog">
                        <div class="modal-content">
                            <div class="modal-header">
                                <button type="button" class="close"  data-dismiss="modal" aria-hidden="true">
                                    &times;
                                </button>
                                <h4 class="modal-title" id="myModalLabel">
                                    注册信息提交确认
                                </h4>
                            </div>
                            <div class="modal-body">
                                <div class="form-group">
                                    <label for="remark" class="col-sm-3 control-label center ">确认要提交吗?</label>
                                    @*<div class="col-sm-9">
                                            <input type="text" class="form-control" id="update_updateDate" name="updateDate">
                                        </div>*@
                                </div>
                            </div>
                            <div class="modal-footer">
                                <button  type="button" class="btn btn-default" data-dismiss="modal">
                                    取消
                                </button>
                                <!-- <button type="submit" onclick="trigger_delete()" class="btn btn-primary" data-dismiss="modal">
                                    确认
                                </button><span id="tip"> </span> -->
                                <button type="button" v-on:click="check_form('add')" class="btn btn-primary">
                                    确认
                                </button>
                            </div>
                        </div><!-- /.modal-content -->
                    </div><!-- /.modal -->
                </div>
            </form>



            <!--body wrapper end-->


        </div>
    </div>
    <!-- main content end-->
</div>

@section JavascriptLink{
    @*<script src="../../../../Content/backSys/js/jquery.signalR-2.4.3.min.js"></script>
    <script src="/signalr/hubs" type="text/javascript"></script>*@

}
@section Javascript{

    <script>
          var vm = new Vue({
                el: "#app",
              data: {
                  TrueName: '',
                  UserName: '',
                  UserPass: '',
                  ValUserPass:'',
                   IDCard: '',
                   BagID: '',
                  Phone: '',
                  Address: '',
                  Email:'',
                },
               methods: {
                   empty_check: function () {
                       flag = true;
                       if (!this.UserName) {
                           return false;
                       }
                       if (!this.UserPass) {
                           return false;
                       }
                       if (!this.Phone) {
                           return false;
                       }

                       if (!this.Address) {
                           return false;
                       }

                       if (!this.Email) {
                           return false;
                       }

                       if (!this.ValUserPass || this.ValUserPass != this.UserPass) {
                           return false;
                       }
                       if (!this.TrueName) {
                           return false;
                       }
                       if (!this.IDCard) {
                           return false;
                       }
                       return true;
                   },

                        // 提交表单
                   check_form: function (act) {
                       if (!this.empty_check()) {
                           $('#addModal').modal('hide');
                           commonUtil.alert("输入有误");
                           return false;
                       }
                      
                       var form_data = $('#form_data').serialize();
                       sendUrl = '@Url.Action("Add","User")';
                       sendData = new FormData();
                       sendData.append('Action', act);
                       sendData.append('UserName', this.UserName);
                       sendData.append('UserPass', this.UserPass);
                       sendData.append('Email', this.Email);
                       sendData.append('Address', this.Address);
                       sendData.append('Phone', this.Phone);
                       sendData.append('IDCard', this.IDCard);
                       sendData.append('TrueName', this.TrueName);
                       //console.log(sendData);
                       // 异步提交数据到Action/GetBagItemByID页面
                       axios({
                           url: sendUrl,
                           method: "post",
                           responseType: 'json',
                           data: sendData,
                           transformRequest: [function (data) {
                               // 对 data 进行任意转换处理
                               $("#tip").html("<span style='color:blue'>正在处理...</span>");
                               return data;
                           }],
                           // `transformResponse` 在传递给 then/catch 前，允许修改响应数据
                           transformResponse: [function (data) {
                               // 对 data 进行任意转换处理
                               return data;
                           }],

                       }).then((data) => {
                           if (data.data > 0) {
                               $("#tip").html("<span style='color:blueviolet'>" + act + "成功！</span>");
                               // document.location.href='system_notice.php'
                               $('#addModal').modal('hide');
                               //location.reload();
                               commonUtil.alert('注册成功', 'success');
                           }
                           else {
                               $("#tip").html("<span style='color:red'>失败，请重试</span>");
                               alert('操作失败');
                           }
                       }).catch(error => {
                           alert(error);
                           $('#addModal').modal('hide');
                       });

                    }


                },
                watch: {
                    //IDCard: {
                    //    deep: true,
                    //    handler(obj) {
                    //        if (!this.IDCard) {
                    //            $('#IDCard_div')[0].className = 'col-sm-10 has-error';
                    //            $('#IDCard_tip')[0].innerText = '身份证输入不合法';
                    //            flag = false;
                    //        } else {
                    //            $('#IDCard_div')[0].className = 'col-sm-10 has-success';
                    //            $('#IDCard_tip')[0].innerText = '输入正确';
                    //        }
                    //    }
                    //}

               },
              mounted: function () {

               },
              created() {
                   $('#addModal').on('hide.bs.modal', function () {
                       // 关闭时清空edit状态为add
                       $('#reset_btn').click();
                       return false;
                   });
                }
            });

    </script>
}
